<template>
  <div>
    <headers></headers>
    <div class="padding88">
      <div class="question ">
        <div class=" auto">
          <div class="header">
            <p class="pull-left">{{targetEntity}}能力<span>{{duan}}</span></p>
            <span><img src="../../assets/clock1.png" alt="" width="19">剩余时间：{{time}}秒</span>
            <p class="pull-right"><span>{{question.num}}</span>/{{total}}</p>
          </div>
          <div class="content">
            <p class="title" v-html="question.examTitle">{{question.num}}、{{question.examTitle}}</p>
            <!--<p class="title" v-html="question.examTitle">{{question.num}}</p>-->
            <ul>
              <li :class="{error: index === errorIndex ,zhengque: index === rightIndex}"v-for="(opt,index) in question.opts" @click="xuanze(question.id,opt.id,opt.correct,question.num,index)"
                  style="padding-left: 40px;position: relative;">
                <span class="ans" style="display: none;" v-if="index === errorIndex || index === rightIndex">{{opt.examOptionCode}}</span>
                <Icon class="ans2" size="29" type="md-close-circle" color="#ff3300" v-if="index === errorIndex" />
                <Icon class="ans2" size="29" type="md-checkmark-circle" color="#009900" v-if="index === rightIndex" />
                <span class="ans" v-if="index !== errorIndex && index !== rightIndex">{{opt.examOptionCode}}</span>
                <span v-html="opt.examOptionName" style="width: auto;border: 0px;margin-right: 10px;"></span>
              </li>
            </ul>
            <Button  class="btn" @click="sumit" v-if="idx === total-1">提交</Button>
            <Button  class="btn" @click="next" v-else>下一题</Button>
          </div>
        </div>
      </div>
    </div>
    <Spin fix v-show="isSpinShow" >
      <div class="loader">
        <Icon type="ios-loading" size=26 class="demo-spin-icon-load"></Icon>
        <div class="font14">加载中...</div>
      </div>
    </Spin>
    <footers></footers>
  </div>
</template>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less" rel="stylesheet/less">
  .ans,.ans2{
    position: absolute;
    left: 0;
    top: 0;
  }
  .ans2{
    left: -1px;
  }
  /* 旋转效果 */
  .demo-spin-icon-load{
    animation: ani-demo-spin 1s linear infinite;
  }
  @keyframes ani-demo-spin {
    from { transform: rotate(0deg);}
    50% { transform: rotate(180deg);}
    to { transform: rotate(360deg);}
  }
  /* 假如内容过长，一屏放不下，滚动条下拉覆盖不全 */
  .ivu-spin-fix {
    position: fixed;
  }

  .question{
    background-color: #f5f5f5;
    margin-bottom: -50px;
    padding:40px 0 250px;
    .auto{
      background-color: #fff;
      border-radius: 3px;
      padding: 30px;
      .header{
        border-bottom: 1px solid #dbdbdb;
        padding-bottom: 20px;
        font-size: 18px;
        color: #666;
        img{
          vertical-align: middle;
          margin-right: 10px;
        }
        .pull-left{
          font-size: 20px;
          color: #333;
          span{
            margin-left: 30px;
          }
        }
        .pull-right{
          font-size: 20px;
          color: #333;
          span{
            color: #ff0000;
          }
        }
      }
      .content{
        padding: 25px 0;
        text-align: left;
        .title{
          font-size: 16px;
          color: #000;
          margin-bottom: 20px;
        }
        li{
          margin-bottom: 10px;
          font-size: 14px;
          color: #000;
          cursor: pointer;
          .ans{
            font-size: 14px;
            border:1px solid #ccc;
            border-radius: 50%;
            display: inline-block;
            width: 26px;
            height: 26px;
            line-height: 26px;
            text-align: center;
            margin-right: 18px;
            font-weight: 700;
          }
          i{
            /*font-size: 29px;*/
            margin-right: 10px;
          }
        }
        .error{
          color: #ff3300;

        }
        .zhengque{
          color: #009900;
          font-size: 14px;
          margin-bottom: 10px;

        }
        button{
          background-color: #957960;
          border-color: #957960;
          font-size: 16px;
          height: 50px;
          width: 282px;
          margin: 40px 0 0 45px;
          color: #fff;
        }
      }
    }
  }
</style>
<script type="text/ecmascript-6">
  import headers from '../template/header'
  import footers from '../template/footer'
  import {getSubject,subExam,centreInfoWeb,abilityPage} from '../../http'
  import {getStore} from "../../storage"

  export default {
        name: '',
        props: {},
        data() {
            return {
              isSpinShow:false,
              abilityitemId:this.$route.query.abilityitemId,    //测评类型Id
              duan:'',          //段位
              targetEntity:'',  //测评名称
              questions:'',     //所有题目
              question:'',      //当前题目
              answers:[],       //用户选择
              idx:0,
              total:0,
              //正确与错误选项
              rightIndex:-1,
              errorIndex:-1,
              //答案
              answer:{
                isTrue:'',
                index:'',
              },
              answersSub:'',             //提交的答案：要做拼接
              sure:false,               //是否确认选择，解决当计时到时之后，用户仍然可以点击答案
              isNext:false,             //是否允许下一题
              time:0,                   //计时
            };
        },
        methods: {
          //提交答案
          sumit() {
            if(this.isSpinShow === false) {
              this.isSpinShow = true;
              if (this.isNext && this.sure) {
                //提交答题结果
                subExam({abilityItemId: this.abilityitemId, answer: this.answersSub}).then(res => {
                  if (res.code === 200) {
                    this.isSpinShow = false;
                    //显示答题统计
                    this.$router.push({
                      name: 'jieguo',
                      query: {
                        answers: JSON.stringify(this.answers),
                        questions: JSON.stringify(this.questions),
                        duan: res.data.duan,
                      }
                    })
                  } else {
                    this.isSpinShow = false;
                    this.$Notice.warning({
                      title: "人才测评提醒",
                      desc: res.info,
                      duration: 3,
                    });
                  }
                }).catch();
              }else {
                this.isSpinShow = false;
              }
              //注：两个if的顺序不能变！！！！！！
              if (!this.sure) {
                this.xuanze(this.question.id, this.question.opts[0].id, this.question.opts[0].correct, this.question.num, 0);
              }
            }
          },
          //用户选择
          xuanze(examId,examoptId,correct,sort,index){
            let rightopt ;
            if(!this.sure) {//选择
              for(let i=0;i<this.question.opts.length;i++){
                if(this.question.opts[i].correct === 1){
                  rightopt = i;
                }
              }
              let isTrue;
              if (correct === 1) {
                isTrue = 1;
                this.rightIndex = index;
              } else {
                isTrue = 0;
                this.errorIndex = index;
                //答题过程中提示正确答案
                // this.rightIndex = rightopt;
              }
              let answer = {
                isTrue:isTrue,
                index:index,
              }
              this.answer.index = index;
              this.answers.push(answer);
              if(this.idx === this.total-1) {//答题完毕
                this.answersSub = this.answersSub + "{" + "'examId':" + examId + ",'examoptId':" + examoptId + ",'sort':" + sort + ",'isTrue':" + isTrue + "}";
                this.answersSub = "["+ this.answersSub+"]";
              }else {
                this.answersSub = this.answersSub + "{" + "'examId':" + examId + ",'examoptId':" + examoptId + ",'sort':" + sort + ",'isTrue':" + isTrue + "}" + ",";
              }
              this.sure = true;
              this.isNext = true;
            }
          },
          //用户切换下一题
          qiehuan(){
              this.idx++;
              this.question = this.questions[this.idx];
              this.time = parseInt(this.question.answeringTime);
              this.targetEntity = this.questions[this.idx].targetEntity;
              this.sure = false;
              clearInterval(this.timer);
              this.timer = setInterval(() => {
                //进入计时器
                if (this.time > 0) {
                  //倒计时
                  this.time--;
                } else {
                  //清除计时
                  //到时，自动选第一个
                  clearInterval(this.timer);
                  this.xuanze(this.question.id,this.question.opts[0].id,this.question.opts[0].correct,this.question.num,0);
                  this.timer = null;
                }
              }, 1000)
          },
          //获取下一题
          next(){
              this.errorIndex = -1;
              this.rightIndex = -1;
              if (this.sure && this.isNext) {
                this.qiehuan();
                this.isNext = false;
              } else {
                this.xuanze(this.question.id, this.question.opts[0].id, this.question.opts[0].correct, this.question.num, 0);
              }
          },
          getQuestion(){
            if(this.isSpinShow === false) {
              this.isSpinShow = true;
              //用户是否登录
              centreInfoWeb().then(res => {
                if (res.code === 200) {
                  //用户是否购买人才能力测评
                  abilityPage().then(res => {
                    if (res.code === 200) {
                      if (res.data.isBuy === 1) {
                        //获取题目
                        getSubject({abilityitemId: this.abilityitemId}).then(res => {
                          if(res.code === 200) {
                            console.info(res.data)
                            this.isSpinShow = false;
                            this.duan = res.data.duan;
                            this.questions = res.data.list;
                            this.targetEntity = this.questions[this.idx].targetEntity;
                            this.question = this.questions[this.idx];
                            this.total = this.questions.length;
                            this.idx = 0;
                            this.time = parseInt(this.question.answeringTime);
                            //计时
                            this.timer = setInterval(() => {
                              //进入计时器
                              if (this.time > 0) {
                                //倒计时
                                this.time--;
                              } else {
                                //清除计时
                                //到时，自动选第一个
                                clearInterval(this.timer);
                                this.xuanze(this.question.id, this.question.opts[0].id, this.question.opts[0].correct, this.question.num, 0);
                                this.timer = null;
                              }
                            }, 1000)
                          }else {
                            this.isSpinShow = false;
                            this.$Notice.warning({
                              title: "人才测评提醒",
                              desc: res.info,
                              duration: 3,
                            });
                          }
                        }).catch();
                      } else {
                        this.isSpinShow = false;
                        this.$Notice.warning({
                          title: "人才测评提醒",
                          desc: "请先购买人才能力测评",
                          duration: 3,
                        });
                        this.$router.push({
                          name: 'ceping'
                        })
                      }
                    }else {
                      this.isSpinShow = false;
                      this.$Notice.warning({
                        title: "人才测评提醒",
                        desc: res.info,
                        duration: 3,
                      });
                    }
                  }).catch()
                } else {
                  this.isSpinShow = false;
                  this.$Notice.warning({
                    title: '登录提醒 ',
                    desc: '使用人才测评，需用户登录！ ',
                    duration: 3,
                  });
                  this.$router.push({name: 'ceping'});
                }
              })
            }
          }
        },
        created() {
          this.getQuestion()
          /*this.$router.push({
            name:'ceping'
          })*/
        },
        destroyed(){
          clearInterval(this.timer);
        },
        components: {
          headers,
          footers,
        }
    }
</script>
